﻿*{
    margin:0;
    padding:0;
}
html,body{
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #222;
    /*width: 100%;*/
    height: 100%;
}
#mainContainer{
    min-height:100%;
    position:relative;
}
#header{
    /*height:50px;*/
    height: 50px;
    border-bottom:1px solid #9a9a9a;
    background:#6EDE28;
    /*background:#ccc;
    background-image:url('assets/diagmonds.png');
    background-repeat:repeat-x;
    background: #424242 none;
    background: -webkit-gradient(linear,left top,left bottom,from(#505050),to(#343434));
    background: -moz-linear-gradient(top,#505050,#343434);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050,endColorstr=#FF343434);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050, endColorstr=#FF343434)";
    background: -ms-linear-gradient(top,#505050,#343434);
    background: -o-linear-gradient(top,#505050,#343434);*/
}
#header span{
    line-height:50px;
    color: #fff;
    font-size:18px;
    font-weight:bold;
    padding-left:20px;
}
#header span:hover{
    color:#5BC1E0;
    cursor:pointer;
}

/*#footer p{
    margin-top:6px;
    text-align:center;
} */
#content{
    /*width:100%;*/
    padding-top: 5px;
    padding-bottom:40px;   /* Height of the footer element */
}
#drawingCanvasHolder{
    width:400px;
    height:500px;
    min-height:350px;
    margin:0px auto;
    padding:10px;
    border: 1px solid #dddddd;
    background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
}
#drawingCanvasHolder ul{
    overflow:hidden;
}
#drawingCanvasHolder ul li{

}
#paintBox{
    background:#fff;
    display:none;
}
.btnControls{
    width:200px;
}
.shareBtn{

}
.sidebyside{
    width:90px;
}
ul#contentLayout{
    overflow:hidden;
    width:980px;
    margin:0 auto;
    display:none;
}
ul#contentLayout li{
    float:left;
    list-style:none;
}

ul.controlContainer{
    padding:10px;
}
ul.controlContainer li{
    list-style:none;
    float:none !important;
}
ul.controlContainer li input
{
    margin-bottom:10px;
}
#controls
{
    padding:0px 10px 0 10px;
    opacity:0;
}
.collapsibleContainerContent
{
    padding: 3px 15px;
    display:none;
    text-align:center;
}
.collapsibleContainer{
}
.brushSize ul{
    overflow:hidden;
}
.brushSize ul li{
    float:left !important;
    list-style:none;
}

#helpContainer{
    padding:20px;
    opacity:0;
}

#helpContainer tr td span{
    /*padding:5px;*/
    margin-left:5px;
    font-weight: bold;
    color: #1c94c4;
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
#helpContainer tr td span:hover{
    /*padding:5px;*/
    cursor:pointer;
    color: #fbcb09;
}

#helpContainer tr td img{
    width:22px;
}

#helpContainer ul li{
    float:none;
    margin-bottom:10px;
}

/*#header ul{
    float:right;
    margin-top:10px;
    margin-right:10px;
    display:none;
}
#header ul li{
    float:left;
    list-style:none;
    padding:5px;
}
#header ul li a{
    color:#ccc;
    text-decoration:none;
    font-size:13px;
}
#header ul li a:hover{
    color:#fff;
} */
.btn{
    cursor:pointer;
    display: inline-block;
    padding:4px 4px 4px 4px;
    padding-left:12px;
    padding-right:12px;
    margin-bottom: 0;
    font-family: "bariolregular","Helvetica neue",helvetica,sans-serif;
    font-size: 13px;
    font-weight: normal!important;
    color: #949496;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    vertical-align: middle;
    cursor: pointer;
    /*background-color: #f4f4f4;
    background-image: -moz-linear-gradient(top,#f7f7f7,#efeff0);
    background-image: -ms-linear-gradient(top,#f7f7f7,#efeff0);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f7f7f7),to(#efeff0));
    background-image: -webkit-linear-gradient(top,#f7f7f7,#efeff0);
    background-image: -o-linear-gradient(top,#f7f7f7,#efeff0);
    background-image: linear-gradient(top,#f7f7f7,#efeff0);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7',endColorstr='#efeff0',GradientType=0);
    border-color: #efeff0 #efeff0 #c8c8cb;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); */
    border: 1px solid #bfbfbf;
    height:25px;
    background: #f6f6f6 url(css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
}
.brushSizeBtnGroup{
    overflow:hidden;
    margin-top:5px;
    display: inline-block;
}
.collapsibleContainer p{
    text-align:center;
    font-weight: bold;
    color: #1c94c4;
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 1.1em;
}
.brushSizeBtnGroup>.btn{
    float: left;
    margin-left: -1px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.brushSizeBtnGroup>.btn:first-child{
    margin-left: 0;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
.brushSizeBtnGroup>.btn:last-child{
    webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
}
.btn.active{
    border:1px solid #fbcb09;
    background: #fdf5ce url(css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.05);
}
.brushSizeBtnGroup .btn div{
    line-height: 0;
}
.small{
    background-color:#000;
    width:5px;
    height:5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.med{
    background-color:#000;
    width:9px;
    height:9px;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
}
.large{
    background-color:#000;
    width:13px;
    height:13px;
    border-radius: 13px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
}
.veryLarge{
    background-color:#000;
    width:18px;
    height:18px;
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
}
#veryLarge{
    padding-top:2px;
}
#eraserVeryLarge{
    padding-top:2px;
}

#doneBtn{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    background-color: #4daebf;
    font-size: 14px;
    padding: 5px 14px 5px;
    color:#fff;
}
#screenHolder{
    position:absolute;
    top:10px;
    left:10px;
    width:400px;
    height:500px;
    overflow:hidden;
}
#loadingScreen{
    width:400px;
    height:500px;
    background:#6AA8CB;
    text-align:center;
}
#loadingScreen p{
    line-height:100px;
    color:#fff;
}
#loadingScreen input{
    padding:5px;
}
/* Button for pop up */
.redBtn
{
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    padding:10px;
    text-align:center;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    background:#ff0000; /* Old browsers */
    background: -moz-linear-gradient(top,#F2594B 0% ,#F2594B 2% ,#BF0426 100%);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F2594B), color-stop(2%, #F2594B), color-stop(100%, #BF0426));
    /*-webkit-tap-highlight-color:rgba(0,0,0,0); */
    border: 1px solid #aa0000;
    border-top-color: #bf0000;
    /*box-shadow: 1px 1px 6px #666666;
    -moz-box-shadow: 1px 1px 6px #666666;
    -webkit-box-shadow: 1px 1px 6px #666666;*/
}
.okBtn
{
    width:80px;
    padding:10px;
    margin:10px auto 0 auto;
    cursor:pointer;
}
/* modal window*/
.modalOverlay
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    margin:0;
    padding:0;
    background:#000;
    opacity:0.5;
    z-index:101;
}
.modalWindow
{
    position:absolute;
    /*top:150px;	        */
    margin:0;
    width:300px;
    /*height:300px;	        done in script now
    text-align:center;*/
    word-spacing:1px;
    line-height:15px;
    font-weight:bold;
    font-size:13px;
    padding:6px;
    /*opacity:0;*/
    z-index:102;
    /*background: -moz-linear-gradient(top,#EFEFEF 0% ,#EFEFEF 2% ,#DCEBDD 100%);
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #EFEFEF), color-stop(2%, #EFEFEF), color-stop(100%, #DCEBDD));*/
    background: #424242 none;
    background: -webkit-gradient(linear,left top,left bottom,from(#505050),to(#343434));
    background: -moz-linear-gradient(top,#505050,#343434);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050,endColorstr=#FF343434);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF505050, endColorstr=#FF343434)";
    background: -ms-linear-gradient(top,#505050,#343434);
    background: -o-linear-gradient(top,#505050,#343434);
    border: 1px solid #ccc;
    color: #fff;
    font-weight: bold;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    box-shadow: 0px 1px 3px #000;
    -moz-box-shadow: 0px 1px 3px #000;
    -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.91);
}
/* End of modal */

#messageText{
    margin-bottom:5px !important;
}
#canvasImg{
    margin-bottom:0px;
}
#loadingMsgBox p{
    font-weight:bold;
    font-size:25px;
    color:red;
    text-align:center;
    line-height:100px;
}
#doneMsgBox{
    display:none;
}
div.tooltip{
    display:none;
    background:yellow;
    padding:7px;
    font-weight:bold;
    font-size:15px;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
#sponsorBox{
    /*width:100%;
    height:75px;
    background:red;*/
    margin-bottom:-4px;
}
#sponsorBox span{
    color:#fff;
    text-shadow:none;
    line-height:38px;
    margin-left:15px;
    font-size:1.5em;
}
#userFormBox{
    width:100%;
    height:92px;
    background:#fff;
    padding-top:5px;
    /*border-top:1px solid #9C0FCB;*/
}
#userFormBox table td{
    padding:2px 0px 2px 9px;
}
#userFormBox input{
    border-bottom:1px solid red;
    border-top:0;
    border-left:0;
    border-right:0;
    font-size:12px;
    padding-left:5px;
    color:#000;
}
#userFormBox input:focus{
    outline:none;
}
#myNameIsInput{
    width:305px;
}
.cityDate{
    width:145px;
}
#sponsorLogoBottom{
    background:#fff;
    padding:0 5px 5px 5px;
    text-align:center;
}
#sponsorLogoBottom img{
    margin-right:10px;
    height:60px;
}
#sponsorLogoBottom img:last-of-type{
    margin-right:0;
}
#flagBox{
    text-align:center;
    color:#fff;
    height:40px;
    background:#000;
    margin-top:5px;
}
#flagBox p{
    line-height:40px;
}
#flagBox img{
    margin-right:5px;
}
.purpleBrush{
    background-color:#9C0FCB;
    width:5px;
    height:5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
.redBrush{
    background-color:#ff0000;
    width:5px;
    height:5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
.blackBrush{
    background-color:#000000;
    width:5px;
    height:5px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}
td.index{
    vertical-align:top;
    font-weight:bold;
    font-size:1.3em;
    padding-right:5px;
    padding-top:5px;
}
td.help{
    vertical-align:top;
    font-size:1.3em;
    color:#9C0FCB;
    padding-top:5px;
}
td.help span:hover{
    cursor:pointer;
    opacity:0.5;
}
#saveBtn:hover{
    cursor:pointer;
    color:#9a9a9a;
}
#sendEmail:hover{
    cursor:pointer;
    color:#9a9a9a;
}


.sharingBtnHolder li{
    float:left !important;
    margin-right:7px;
}

/* CSS for printing. */
@media print{
    #controls{
        display:none;
    }
    #header{
        display:none;
    }
    #footer{
        display:none;
    }
    #helpContainer{
        display:none;
    }
    #flagBox{
        display:none;
    }
}

/* For Mail Chimp form */
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mce-EMAIL{
    width:200px;
    display: block;
    padding: 4px 0;
    margin: 0 4% 5px 0;
    text-indent: 5px;
    min-width: 130px;
    border: 1px solid #999;
}
#mc-embedded-subscribe{
    padding:.2em !important;
    width:100px;
    font-size: 1em !important;

    /*font-weight:normal !important;*/
}

/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
.emailContainer{
    width:220px;
}
.email_text{
    width:200px;
    display: block;
    padding: 4px 0;
    text-indent: 5px;
    min-width: 130px;
    border: 1px solid #999;
    margin-bottom:5px;
}
.email_text_area{
    width:192px;
    display: block;
    border: 1px solid #999;
    resize:none;
    overflow:auto;
    padding: 4px 4px 4px 4px;
    font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif !important;
    font-size: 12px;
    font-weight: normal;
    border-radius:3px;
}

#sendEmailBtn{
    padding:.2em !important;
    width:50px;
    font-size: 1em !important; margin-top:5px;
}
/* imp - do not remove */
#collapsibleContainerContentsendEmailContainer{
    padding: 3px 7px !important;
    border-radius:5px;
}

input[type='text'],[type='email']{
    border-radius:3px;
}
.placeholder { color: #aaa; }

.errorMsg{
    text-align:center;
    width:500px;
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    font-size: 1.8em;
    margin:150px auto;
}
.howTo {
    width:210px;
    height: 135px;
    background: #efefef;
    border: 1px solid #9a9a9a;
    margin: 0 auto;
    text-align:center;
}
.footer{
    width: 100%;
    position: absolute;
    bottom: 0px;
    background:#303030;
    border-top:3px solid #1c94c4;
    color: #fff;
    text-align: center;
    padding: 5px 0;
}
.navigationLinks{
    list-style: none;
    padding: 0;
    margin: 6px 0;
    text-align: center;/*make this change*/
}
.navigationLinks li{
    float: none;/*make this change*/
    display:inline;/*make this change*/
    margin: 0 3px;
    padding-top:5px;
}
.navigationLinks li a{
    color:#ccc;
    text-decoration:none;
    font-size:13px;
    display:inline-block;/*make this change*/
}
.navigationLinks li a:hover{
    color:#fff;
}